<template>
    <div class="edit-popup">
        <popup ref="popupRef" :title="popupTitle" :async="true" width="550px" @confirm="handleSubmit" @close="handleClose">
            <el-form class="ls-form" ref="formRef" :rules="rules" :model="formData" label-width="80px" label-position="left">
                <el-form-item label="审核" prop="status">
                    <el-radio-group v-model="formData.status">
                        <el-radio :value="2">通过</el-radio>
                        <el-radio :value="3">驳回</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="驳回原因" prop="value" v-if="formData.status == 3">
                    <el-input class="ls-input" v-model="formData.value" placeholder="请输入驳回原因" clearable type="textarea" :rows="4"/>
                </el-form-item>
                <el-form-item label="预约号码" prop="number" v-if="formData.status == 2">
                    <el-input-number class="ls-input" v-model="formData.number" placeholder="请输入预约号码" clearable :controls="false"/>
                    <!-- <el-alert title="预约号码不能为0" type="error" :closable="false" style="margin-top: 10px;"/> -->
                </el-form-item>
            </el-form>
        </popup>
    </div>
</template>
<script lang="ts" setup>
import type { FormInstance } from 'element-plus'

import { orderCheck } from '@/api/apis'
import Popup from '@/components/popup/index.vue'

const emit = defineEmits(['success', 'close'])
const formRef = shallowRef<FormInstance>()
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const popupTitle = ref('审核预约')
const formData = reactive({
    id: '',
    status: 2 as string | number,
    value: '',
    number: 0
})
// 自定义校验规则：预约号码不能为0
const validateAmount = (rule: any, value: number, callback: Function) => {
  if (value === 0) {
    callback(new Error('预约号码不能为0'));
  } else {
    callback();
  }
};
const rules = {
    value: [
        {
            required: true,
            message: '请输入驳回原因',
            trigger: ['blur']
        }
    ],
    number: [
        {
            required: true,
            message: '请输入预约号码',
            trigger: ['blur']
        },
        { validator: validateAmount, trigger: 'blur' }
    ]
}

interface Props {
    id: number
    status: number
    value?: string
    number?: number
}
const handleSubmit = async () => {
    await formRef.value?.validate()
    let obj = {
        id: formData.id,
        status: formData.status,
        value: formData.status == 3 ? formData.value : formData.number,
    }
    
    await orderCheck(obj)
    popupRef.value?.close()
    emit('success')
}

const handleClose = () => {
    emit('close')
}

const open = (type = 'add') => {
    popupRef.value?.open()
}

const setFormData = async (data: Record<any, any>) => {
    for (const key in formData) {
        if (data[key] != null && data[key] != undefined) {
            //@ts-ignore
            formData[key] = data[key]
        }
    }

    if (data['status'] == '0' || data['status'] == 0 || data['status'] == '' || data['status'] == null || data['status'] == undefined || data['status'] != '2' || data['status'] != '3'){ 
        formData['status'] = ''
    }else{
        formData['status'] = Number(data['status'])
    }
}

defineExpose({
    open,
    setFormData
})
</script>
